<template>
  <div class="shop-detail">
    <van-nav-bar
        title="详情"
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft"  
    /> 
    <!-- <van-swipe class="banner" :autoplay="5000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in bannerArr" :key="index">
            <van-image
                v-if="item.upload_type='img'"
                width="100%"
                height="100%"
                :src="item.banner_pic"
            />
            <video
            v-if="item.upload_type='video'"
                :src="item.banner_pic"
                controls
                accept="video/*"
                id="video">您的浏览器不支持 video 标签。</video>
        </van-swipe-item> 
    </van-swipe> -->
    <div class="banner">
        <van-image 
            width="100%"
            height="100%" 
            :src="itemData.img_url"
        />
    </div>

    <div class="sign-up">
      <div class="enrolment">
        <p>
            {{itemData.title}}
            <!-- <span>拼团</span> -->
        </p>
        <p style="color:#666;font-size:.373333rem;margin:.133333rem 0;">
            {{itemData.desc}} 
        </p>
        <div class="price-box">  
            <div class="num clear-both">
                <p class="float-left">观看次数：{{itemData.play_num}}</p>
                <p class="float-left date_time"  v-if="itemData.end_time*1000 <= newDateTime">直播时间：已结束</p>
                <p class="float-left date_time" v-if="itemData.start_time*1000 >= newDateTime">直播时间：{{itemData.start_time | formatDate}}</p> 
                <p class="float-left date_time" v-if="itemData.start_time*1000 <= newDateTime&&newDateTime<= itemData.end_time*1000">直播时间：正在直播</p> 
            </div>  
        </div>
        <div class="count_down_box clear-both" v-if="newDateTime<=itemData.start_time*1000">
            <span class="float-left">倒计时：</span>
            <van-count-down class="float-left" millisecond :time="parseInt(itemData.start_time)*1000-new Date().getTime()" @finish="finishDate" format="DD 天 HH 时 mm 分 ss 秒" />
        </div> 
      </div>
    </div>

    <!-- <div class="sign-up-time">
      <p>距离活动报名截止还剩<span>02天20时34分10秒</span></p>
      <i>当前没有小朋友在拼团，快来发起拼团</i>
    </div> -->

    <!-- <div class="active-info">
      <p class="">规格<span>金棕</span></p>
      <p class="border-top">发货<span>北京市</span></p>
      <p class="border-top">商品<span>服装</span></p>
    </div> -->

    <div class="detail">
      <div class="title"><h3>课程详情<b></b></h3></div>
      <div class="detail_content" v-html="itemData.content"></div> 
    </div>

    <div class="btn">
        <div class="btn_item">
            <a class="sign-up-btn gray_btn" v-if="itemData.start_time*1000-900000 >= newDateTime">即将直播</a>
            <a class="sign-up-btn" @click.stop="pushLive(itemData)"  v-if="itemData.start_time*1000-900000 <= newDateTime&&newDateTime<= itemData.end_time*1000">进入直播间</a>
            <a class="sign-up-btn" @click.stop="pushLive(itemData)"  v-if="itemData.end_time*1000 <= newDateTime">查看回放</a>
        </div>
        <!-- <div class="btn_item">
            <a class="invited-btn">邀请好友</a>
        </div>  -->
    </div>
  </div>
</template>

<script>
import * as api from './../../api/api'
import nError from './../tpl/error'
import menuTpl from './../tpl/menuTpl'
export default {
    data(){
      return{
            userInfo:{},
            subject_id:'',
            itemData:{},
            bannerArr:[],
            newDateTime:new Date().getTime(),
      }
    },
    watch:{
        '$route'(to,from){   
            if(to.path=='/liveDetail'){
                this.initData();
            }
        }
    },
    created(){
        this.initData();
        this.userInfo=sessionStorage.getItem('userInfo')?JSON.parse(sessionStorage.getItem('userInfo')):{}; 
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        initData(){
            this.subject_id=this.$route.query.subject_id;  
            if(!this.$route.query.subject_id){
                this.$notify({ type: 'danger', message: '商品id为空' });
                this.$router.go(-1);
            }else{
                this.getDataDetail();
                this.itemData={};
            } 
        },
        getDataDetail(){
            let vm = this;
            api.fetchSectionSubjectDetail({subject_id:vm.subject_id}).then(res=>{
                if(res.data.code==200){
                    vm.itemData=res.data.data;
                    vm.bannerArr=res.data.data.banner_pic?JSON.parse(res.data.data.banner_pic):[]
                } 
            })
        },
        //进入直播间
        pushLive(item){
            if(item.end_time*1000 <= new Date().getTime()){ 
                if(item.replay_url){
                    window.location.href=item.replay_url;  
                }else{
                    this.$dialog.alert({
                        message: '已结束，请稍后查看回放'
                    }); 
                } 
            } else {
                api.postJsonSubjectPlay({open_id:this.userInfo.wx_open_id,subject_id:this.subject_id}).then(res=>{
                    if(res.data.code==200){
                        window.location.href=item.play_url;
                    }
                }) 
            }
        },
        finishDate(){
            this.newDateTime=new Date().getTime();
            this.$forceUpdate();
        },
    },
    components:{
    }

  }
</script>
<style lang="scss">
    .detail_content{ 
        img{
            width:100% !important;
        }
    }
</style>
<style scoped lang="scss">
  .shop-detail{
    position: relative;
    width: 100%;
    height: auto;
    // padding-top: 7rem;
    padding-bottom:50px;
    .banner{
    //   position: absolute;
    //   top: 0;
      width: 100%;
      height: 5.786667rem;

      img{
        width: 100%;
        height: 100%;
      }
    }

    .sign-up{
      padding: .3rem .5rem;
      background-color: #FFF;

      .enrolment {
        p{
          font-size: .54rem;

          span{
            margin-left: .3rem;
            display: inline-block;
            background: #ebbb40;
            padding: 0 .2rem;
            font-size: .4rem;
            border-radius: .1rem;
          }
        }

        .price-box{
            margin-top: .1rem;
            display: flex;
            align-items: center;
            -webkit-align-items: center;
            justify-content: space-between;
            -webkit-justify-content: space-between; 
            .num{ 
                p{
                    font-size: .4rem;
                    color:#666;
                }
                .date_time{
                    margin-left:.4rem;
                }
            } 
        }
        .count_down_box{
            margin-top: .1rem;
            color:#1989FA;
            span{
                font-weight: bold;
            }
            .van-count-down {
                color: #1989FA !important; 
            }
        }
      }
    }

    .sign-up-time{
      margin-top: .25rem;
      padding: .3rem;
      background: #fff;

      p{font-size: .45rem;color: #7d7d7d}
      span{
        margin-left: .3rem;
        color: #ff9a04;
        font-weight: bolder;
      }

      i{
        padding-top: .2rem;
        font-size: .4rem;
        color: #999;
        font-style: normal;
        display: block;
      }
    }

    .active-info{
      margin-top: .25rem;
      padding: .3rem;
      background-color: #FFF;

      p{
        padding: .3rem 0;
        font-size: .43rem;

        span{
          margin-left: .3rem;
        }
      }
      .border-top{border-top: 1px solid #dadada; }
    }

    .detail{
        margin-top: .25rem;
        padding: .3rem;
        background: #fff; 
        .title{ 
            h3{
                padding: .3rem 0;
                text-align: center;
                font-size: .43rem;
            } 
            b{
                margin: 0 auto;
                margin-top: .2rem;
                width: .9rem;
                height: .1rem;
                background: #1989FA;
                display: block;
                border-radius: 1rem;
            }
        } 
        

    }

    .btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        background: #fff;
        .btn_item{
            flex:1;
            padding:0 5%;
            a{
                width:100%;
                height: 1rem;
                line-height: 1rem;
                margin-left: .2rem; 
                font-size: .4rem;
                border-radius: 1rem;
                display: block;
                text-align: center;
                background: #1989FA;
                color:#fff;
            } 
            .invited-btn{background: #1989FA}
            .gray_btn{
                background:#ccc;
            }
        }
        

    }
  }
    #video{
        width:100%;
        height:100%;
    }
    
</style>
